<template>
    <div class="container">
        <h1>随机粒子效果演示</h1>
        <p>当前效果: {{ PARTICLE_TYPES[currentType].name }}</p>

        <div class="controls">
            <label>
                切换间隔(秒):
                <input type="range" v-model="changeIntervalSec" min="5" max="60" />
                {{ changeIntervalSec }}
            </label>

            <label>
                粒子数量:
                <input type="range" v-model.number="particleCount" min="50" max="500" />
                {{ particleCount }}
            </label>
        </div>

        <RandomParticles
            :change-interval="changeIntervalSec * 1000"
            :particle-count="particleCount"
            @particleTypeChange="handleTypeChange"
        />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import RandomParticles from '@/components/RandomParticles/index.vue'

const PARTICLE_TYPES = {
    snow: { name: '雪花' },
    rain: { name: '雨滴' },
    leaves: { name: '落叶' },
    dandelion: { name: '蒲公英' }
}

const changeIntervalSec = ref(15)
const particleCount = ref(150)
const currentType = ref('snow')

function handleTypeChange(type) {
    currentType.value = type
}
</script>

<style scoped>
.container {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 0 0 5px black;
}

.controls {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

label {
    display: flex;
    align-items: center;
    gap: 10px;
}
</style>
